<html>
    <head>
        <title>大屏展示</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
        <link rel="stylesheet" href="../../../style.css">

        <style>

            .head{
                z-index: 2;
                top:0px;
                left: 0px;
                position: absolute;
                width: 100%;
                overflow: hidden;
            }

            .head-item{
                text-align: center;
                padding: 10px;
                background: #0F517D;
                opacity: 0.9;
                border-radius: 3px;
            }

            .head-item h1{
                margin-top: 0px;
                font-size: 30px;
                margin-bottom: 0px;
                font-family: 'Arial-BoldMT';
            }

            .head-item h3{
                margin-top: 0px;
                font-family: 'NotoSansHans-Bold';
                margin-bottom: 0px;
                font-size: 14px;
            }

            .head-item.jie{
                color: #44D1DD;
            }

            .head-item.dev{
                color: #30E7A3 ;
            }

            .head-item.alarm{
                color: #FF3D50  ;
            }

            .head-item.online{
                color: #12E266   ;
            }

            .head-item.unline{
                color: #FFC526    ;
            }

            .left{
                width: 250px;
                min-height: 200px;
                border: solid 1px rgb(196, 83, 87);
                border-radius: 4px;
                position: absolute;
                left: 10px;
                top:100px;
                background: #0F517D ;
                opacity: 0.9;
                padding: 20px 0px 20px 0px;
            }

            .left .title{
                background: #DB4F53 ;
                line-height: 40px;
                color: #fff;
                text-align: center;
                font-weight: 700;
                font-size: 14px;
            }

            .left .line{
                height: 1px;
                background: rgb(53, 117, 122) ;
                width: 90%;
                margin: 10px auto;
            }

            .left .table{
                width: 90%;
                margin: 10px auto;
                color: #fff;
                font-size: 14px;
            }

            .left .table i{
                display: inline-block;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background: #CA595C;
                border-radius: 4px;
            }

            .left .table .number{
                background: #0A304B;
                color: #CA595C;
                font-size: 12px;
                font-style: normal;
            }

            .right{
                width: 250px;
                min-height: 200px;
                border: solid 0px red;
                border-radius: 4px;
                position: absolute;
                right: 10px;
                top:100px;
                opacity: 0.9;
                color: #fff;
            }

            .right .chart-title{
                background: #0C5D93;
            }

            .right .chart-outer{
                height: 140px;
                background: #0F517D;
                padding: 0px;
            }

            .right .chart-wrap{
                background: transparent;
            }


            .map{
                width: 100%;
                height: 100%;
                background: cadetblue;
                position: absolute;
                top:0px;
                left: 0px;
                overflow: hidden;
            }

            .el-dialog{
                background: #003C63;
                box-shadow: #0D5887 0px 0px 10px 5px;
            }

            .el-dialog__title{
                color: #FFC526;
            }

            .el-dialog__body{
                padding-top: 0px;
                color: #fff;
            }

            .alarm-outer{
                border: solid 1px #0D5887;
                width: 100%;
                height: 300px;
                color: #fff;
                background: #06304A;
                font-size: 12px;
            }

            .alarm-item{
                border: solid 1px red;
                height: 120px;
                overflow: hidden;
            }

            .alarm-item h6,.alarm-item p{
                margin: 0px 0px 5px 0px;
            }

            .alarm-item h6{
                line-height: 30px;
                background: #0D5887;
            }

            .alarm-item .btn{
                margin-right: 10px;
            }
            .alarm-item .btn img{
                height: 18px;
            }

            .alarm-video{
                border: solid 1px #0D5887;
                height: 200px;
            }

            .alarm-video video{
                height: 100%;
                width: 100%;
            }

            .table-detail{
                color: #fff;
                font-size: 14px;
                width: 100%;
                width: 300px;
                position:absolute;
                left: 10px;
                top:400px;
            }

            .table-detail td{
                line-height: 25px;
            }

            .table-detail .text{
                background: rgba(242,242,242,0.1);
                border-radius: 4px;
                padding-left: 5px;

            }

        </style>

    </head>
    <body>
        <div class="page" id="page-vue">

            <div class="map">
                <chart-map
                    ref="chartMap"
                    :mapstyle="SiteConfig.mapStyle"
                    :markers="map.markers"
                    :center="map.center"
                    :zoom="map.zoom"
                    v-on:click-marker="onMarker"
                    v-on:on-zoom="onZoom">
                    <info-win :title="map.winTitle" :point="map.winPoint">
                        <p>{{map.winText}}</p>
                        <el-button size="mini" @click="goDetail">进入</el-button>
                    </info-win>
                </chart-map>
            </div>

            <div class="head">
                    <el-row :gutter="20" style="margin: 10px 0px;">
                            <el-col :span="5">
                                <div class="head-item jie">
                                    <h1>12314</h1>
                                    <h3>总申报企业 (家)</h3>

                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div class="head-item dev">
                                        <h1>89</h1>
                                        <h3>当日申报 (家)</h3>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                    <div class="head-item alarm">
                                            <h1>15</h1>
                                            <h3>消费异常 (条)</h3>
                                    </div>
                            </el-col>
                            <el-col :span="5">
                                    <div class="head-item online">
                                            <h1>32</h1>
                                            <h3>单耗异常 (条)</h3>
                                    </div>
                            </el-col>
                            <el-col :span="4">
                                    <div class="head-item unline">
                                            <h1>1109</h1>
                                            <h3>能耗强度 (台)</h3>
                                    </div>
                            </el-col>
                        </el-row>
            </div>

            <div class="left">
                <div class="title">企业能耗月度排行</div>
                <div class="line"></div>
                <table class="table">
                    <tr v-for="(item,index) in tableAlarm">
                        <td><i>{{index+1}}</i></td>
                        <td>{{item.name}}</td>
                        <td style="text-align: right"><i class="number">{{item.number}}</i></td>
                    </tr>
                </table>
            </div>

            <div class="right">
                    <div class="chart-title">历年能耗趋势图</div>
                    <div class="chart-outer">
                        <chart-elex :option="chartOptionAlarm"></chart-elex>
                    </div>

                    <div class="chart-title">能源类别</div>
                    <div class="chart-outer">
                        <chart-elex :option="chartOptionOnline"></chart-elex>
                    </div>
            </div>



            <!--编辑弹窗-->
            <el-dialog title="报警信息" :visible.sync="editAlarmVisible" width="600">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="alarm-outer">
                            <div class="alarm-warp">
                                <div class="alarm-item">
                                    <h6>浙江天吧信息科技</h6>
                                    <p>2018-10-12 10:22:23</p>
                                    <p>滨江大道1号33路</p>
                                    <p>
                                        <a class="btn" @click="onAlarmDetail()"><img src="../../../imgs/icon-info.png"></a>
                                        <a class="btn"><img src="../../../imgs/icon-gis.png"></a>
                                        <a class="btn"><img src="../../../imgs/icon-av.png"></a>
                                    </p>
                                </div>

                                <div class="alarm-item">
                                    <h6>浙江天吧信息科技</h6>
                                    <p>2018-10-12 10:22:23</p>
                                    <p>滨江大道1号33路324的士速递对方水电费</p>
                                    <p>
                                        <a class="btn"><img src="../../../imgs/icon-info.png"></a>
                                        <a class="btn"><img src="../../../imgs/icon-gis.png"></a>
                                        <a class="btn"><img src="../../../imgs/icon-av.png"></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <h5>实时监控视频</h5>
                        <div class="alarm-video">
                            <!--
                            <video controls="controls" >
                                <source src="../../imgs/company.mp4" type="video/mp4">
                                请升级您的浏览器
                            </video>
                            -->
                        </div>
                    </el-col>
                </el-row>

            </el-dialog>

            <el-dialog title="单耗异常" :visible.sync="dialDetailVisible" width="400" >

            </el-dialog>

            <table class="table-detail" >
                <tr><td>单位名称：</td><td class="text">浙江省正泰科技有限公司</td></tr>
                <tr><td>报警时间：</td><td class="text">2012-23-23 11:23:33</td></tr>
                <tr><td>报警级别：</td><td class="text">2012-23-23 11:23:33</td></tr>
                <tr><td>当前值：</td><td><span class="text" style="margin-right: 50px;">123 </span> 阔值：<span class="text">1233 </span></td></tr>
                <tr><td>事件描述：</td><td class="text">12312312312312321313123</td></tr>
            </table>

        </div>




        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>

        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

        <script>

                var vuePage=new Vue({
                    el:'#page-vue',
                    data:{
                        editAlarmVisible:false,
                        dialDetailVisible:false,
                        map:{
                            markers:[],
                            winTitle:'化工总厂',
                            winText:'',
                            winPoint:{},
                            center:{lng:0,lat:0},
                            zoom:5
                        },
                        tableAlarm:[],
                        chartOptionAlarm:{},
                        chartOptionOnline:{}
                    },
                    methods:{
                       aa(){},
                       goDetail(){
                           this.map.winText = Math.random();
                           //alert(this.editAlarmVisible);
                       },
                       onMarker(mdata){
                           //alert(JSON.stringify(mdata));
                           this.map.winPoint={
                               lat:mdata.lat,
                               lng:mdata.lng
                           };
                       },
                       onZoom(zoom){
                           //alert(zoom);
                           if(zoom==5){
                                this.$refs.chartMap.clearMarkerAll();
                                this.map.markers.length=0;
                                this.map.markers.push({
                                    lat:30,
                                    lng:120,
                                    text:'5'
                                },{
                                    lat:39,
                                    lng:116,
                                    icon:'http://127.0.0.1:8080/imgs/marker-alarm.png',
                                    text:'56'
                                });
                           }else if(zoom==10){
                            this.$refs.chartMap.clearMarkerAll();
                                this.map.markers.length=0;
                                this.map.markers.push({
                                    lat:30,
                                    lng:120,
                                    text:'中南大厦'
                                },{
                                    lat:32,
                                    lng:116,
                                    text:'海康威视2号楼'
                                });
                           }
                       },
                       onAlarmDetail(){
                           this.dialDetailVisible = true;
                       },

                       refreshChart(){
                            this.$refs.chartMap.clearMarkerAll();
                            this.map.markers.length=0;

                            for(var i=0;i<20;i++){
                                if(i==0){
                                    this.map.markers.push(
                                        {
                                            lat:39,
                                            lng:116,
                                            icon:'http://127.0.0.1:8080/imgs/marker-alarm.png',
                                            text: parseInt(56*Math.random())
                                        }
                                    );
                                }else{
                                    this.map.markers.push({
                                        lat:30+Math.random()*5,
                                        lng:120-Math.random()*10,
                                        text:parseInt(10*Math.random())
                                    });
                                }
                            }

                            this.chartOptionOnline = {
                            grid:{
                                top:10
                            },
                            series: [
                                {
                                    name: '能源分类',
                                    type: 'pie',
                                    radius: '65%',
                                    center: ['50%', '50%'],
                                    data: [
                                        { value: 335*Math.random(), name: '水' },
                                        { value: 310, name: '电' },
                                        { value: 234, name: '煤' },
                                        { value: 234, name: '油' },
                                        { value: 234, name: '气' },
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };



                            setTimeout(() => {
                                this.refreshChart();
                            }, 1500);
                       }

                    },
                    created:function(){
                        this.tableAlarm=[
                            {name:'浙江新能源',number:34},
                            {name:'相逢鞋业',number:42},
                            {name:'中国铁建',number:14},
                            {name:'eshasd女装有限公司',number:12},
                            {name:'海康卫视',number:50},
                            {name:'吉利汽车股份',number:32}
                        ];

                        this.editAlarmVisible = true;


                    },
                    mounted:function(){
                        this.map.markers.push({
                            lat:30,
                            lng:120,
                            text:'5'
                        },{
                            lat:39,
                            lng:116,
                            icon:'http://127.0.0.1:8080/imgs/marker-alarm.png',
                            text:'56'
                        });
                        this.map.winText='asdd';

                        this.chartOptionAlarm = {
                            grid:{
                                top:20,
                                bottom:10,
                                left:10,
                                right:10,
                                containLabel:true //包含标签
                            },
                            xAxis: {
                                type: 'category',
                                data: ['2015', '2016', '2017', '2018', '2019']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: [120, 200, 150, 80, 70],
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:function(params){
                                            return SiteConfig.chartColors[params.dataIndex];
                                        }
                                    }
                                }
                            }],
                            textStyle:{
                                color:'#fff'
                            }
                        };

                        this.chartOptionOnline = {
                            grid:{
                                top:10
                            },
                            series: [
                                {
                                    name: '在线率',
                                    type: 'pie',
                                    radius: '65%',
                                    center: ['50%', '50%'],
                                    data: [
                                        { value: 335, name: '在线' },
                                        { value: 310, name: '离线' },
                                        { value: 234, name: '其他' },
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        this.refreshChart();

                    }
                });


            </script>
    </body>
</html>
